<template>
  <div class="app-container">

    <el-button type="text" @click="importData"><i class="fa fa-plus"/> 批量导入</el-button>

    <el-form ref="goods" :model="goods" label-width="80px" :rules="rules">

      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="goods.goodsName" style="width: 300px"></el-input>
      </el-form-item>

      <el-form-item label="商品价格" prop="goodsPrice">
        <el-input v-model="goods.goodsPrice" style="width: 180px"></el-input>
      </el-form-item>

      <el-form-item label="商品类型" prop="goodsType">
        <el-select v-model="goods.goodsType" placeholder="请选择商品类型">
          <el-option label="零食" value="1"></el-option>
          <el-option label="地方特产" value="2"></el-option>
          <el-option label="旅游纪念品" value="3"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="商品描述" prop="goodsDescript">
        <el-input type="textarea" v-model="goods.goodsDescript" style="width: 500px"></el-input>
      </el-form-item>

      <el-form-item label="图片文件" prop="introduction">
        <el-upload

          ref="upload"
          action="http://localhost:9000/zukeApi/product/goods/addGoods"
          :auto-upload="false"
          :data="goods"
          :on-success="handleAvatarSuccess"
          :limit="1"
          :before-upload="beforeAvatarUpload"
          name="filedata"
          multiple
        >
          <el-button size="mini" type="primary">上传</el-button>
        </el-upload>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>

    </el-form>

    <!-- 批量导入弹出框 -->
    <el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
      <el-form label-position="right" label-width="170px">
        <el-form-item label="文件">
          <el-upload
            :multiple="false"
            :on-success="onUploadSuccess"
            :action="'http://localhost:9000/zukeApi/product/goods/importData'"
            class="upload-demo">
            <el-button size="mini" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xls文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImportVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {

  name : "add",

  data() {
    // 验证规则
    var validateGoodsName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入商品名称'));
      } else {
        callback();
      }
    };

    var validateGoodsPrice = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入商品价格'));
      } else if(isNaN(value)){
        callback(new Error('请输入数字'));
      }else {
        callback();
      }
    };

    var validateGoodsType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择商品类型'));
      } else {
        callback();
      }
    };

    var validateGoodsDes = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入商品描述'));
      } else {
        callback();
      }
    };

    return {
      goods: {
        goodsName: '',
        goodsPrice: '',
        goodsType: '',
        goodsDescript: ''
      },
      rules: {
        goodsName: [
          { validator: validateGoodsName, trigger: 'blur' }
        ],
        goodsPrice: [
          { validator: validateGoodsPrice, trigger: 'blur' }
        ],
        goodsType: [
          { validator: validateGoodsType, trigger: 'blur' }
        ],
        goodsDescript: [
          { validator: validateGoodsDes, trigger: 'blur' }
        ]
      },
      dialogImportVisible: false,
    }
  },
  methods: {
    // 点击上传按钮绑定事件
    importData(){
      this.dialogImportVisible = true       //设置弹出框显示
    },
    saveOrUpdate() {
      this.$refs['goods'].validate((valid) => {
        if (valid) {
        } else {
          alert('请输入合法的数据！');
          return false;
        }
      });
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //调用的是表单中的:before-upload="beforeAvatarUpload"
    beforeAvatarUpload(file) {
      //上传文件的大小
      const isLt10M = (file.size / 1024 / 1024) < 10;
      if (!isLt10M) {
        this.$message.error("上传的图片大小不能超过10MB");
        return false;
      }
      return true;
    },
    //调用的是表单中的::on-success="handleAvatarSuccess"
    handleAvatarSuccess(resp) {
      if (resp.code === 200) {
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.goods = {}
          }
        })
        this.$refs.upload.clearFiles();

      } else {
        this.$message({
          message: '上传失败',
          type: 'error'
        })
      }
    },
    // 批量上传成功
    onUploadSuccess(){
      this.dialogImportVisible = false      //设置弹出框关闭
      this.$message({
        message: '上传成功',
        type: 'success',
      })
    }


  }
}
</script>
